<template>
<transition enter-active-class="animated slideInDown" leave-active-class="animated slideOutUp" >
  <div class="list-wrapper" >
    <h1 class="list-title border-bottom-1px">全部服务</h1>
    <ul class="list-content border-bottom-1px">
      <li class="list-item border-right-1px" v-for="item in navList">
        <span class="list-link">
          <img :src="item.iconUrl" width="44px" height="24px" alt="">
          <p class="text"> {{item.name}} </p>
        </span>
      </li>
    </ul>
  </div>
</transition>
</template>
<script>
// import mapState from 'vuex'
export default {
  computed: {
    navList() {
      return this.$store.state.navList
    }
  }
}
</script>
<style scoped>
.navigator .list-wrapper {
  position: fixed;
  left: 0;
  top: 54px;
  z-index: 40;
  width: 100%;
}

.border-bottom-1px,
.border-left-1px,
.border-right-1px,
.border-top-1px {
  position: relative;
}

.navigator .list-wrapper .list-title {
  box-sizing: border-box;
  height: 44px;
  padding-top: 8px;
  text-align: center;
  background: #fff;
  font-size: 16px;
  color: #666;
}

.navigator .list-wrapper .list-title:after {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.navigator .list-wrapper .list-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #fff;
}

.border-bottom-1px:after,
.border-bottom-1px:before,
.border-left-1px:after,
.border-left-1px:before,
.border-right-1px:after,
.border-right-1px:before,
.border-top-1px:after,
.border-top-1px:before {
  content: "";
  display: block;
  position: absolute;
  transform-origin: 0 0;
}

.navigator .list-wrapper .list-content .list-item {
  -ms-flex: 1 1 1e-9px;
  -webkit-box-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: 1e-9px;
  flex-basis: 1e-9px;
  width: 1%;
  height: 105px;
  text-align: center;
}

.navigator .list-wrapper .list-content .list-item .list-link {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding-top: 28px;
}

.navigator .list-wrapper .list-content .list-item .list-link .icon {
  display: block;
  width: 40px;
  height: 24px;
  margin: 0 auto 16px;
  background-size: 40px 24px;
}

.navigator .list-wrapper .list-content .list-item:after {
  border-right: 1px solid rgba(0, 0, 0, .04);
}

.navigator .list-wrapper .list-content:after {
  border-bottom: 1px solid rgba(0, 0, 0, .04);
}

.navigator .list-wrapper .list-content .list-item .list-link .icon.icon-dache {
  background-image: url();
}

.navigator .list-wrapper .list-content .list-item .list-link .icon.icon-driverservice {
  background-image: url();
}

.navigator .list-wrapper .list-content .list-item .list-link .icon.icon-gongjiao {
  background-image: url();
}

.border-bottom-1px:after {
  border-bottom: 1px solid #ebebeb;
  left: 0;
  bottom: 0;
  width: 100%;
  transform-origin: 0 bottom;
}
.list-wrapper{
  animation-duration: 0.3s;
}
.enter-leave-class{
  animation-duration: 1s;
}

</style>